<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <style>
      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif; background:#f7f7f7; }
      .container { max-width: 380px; margin: 10vh auto; padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
      h1 { font-size: 20px; margin: 0 0 16px; }
      label { display:block; margin: 12px 0 6px; font-weight: 600; }
      input[type="text"], input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; outline: none; }
      button { width: 100%; margin-top: 16px; padding: 10px 12px; background:#1677ff; border:none; color:#fff; border-radius:6px; cursor:pointer; }
      .hint { margin-top: 10px; font-size: 12px; color: #666; }
      .error { margin-top: 10px; color: #d4380d; background: #fff2e8; border:1px solid #ffd8bf; padding:8px; border-radius:6px; }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>登录</h1>
      <form action="/login" method="post" accept-charset="utf-8">
        <label for="username">用户名</label>
        <input id="username" name="username" type="text" placeholder="输入用户名" value="admin" required>

        <label for="password">密码</label>
        <input id="password" name="password" type="password" placeholder="输入密码" value="123456" required>

        <button type="submit">登录</button>
        <div class="hint">示例账号：用户名 <code>admin</code>，密码 <code>123456</code></div>
        {% if error %}
        <div class="error">{{ error }}</div>
        {% endif %}
      </form>
    </div>
  </body>
</html>